<template>
  <div>
    <el-row class="box">
      <!-- 右移5格，自己占12格 -->
      <el-col :span="12" :offset="5">
        <!-- model：表格的数据 -->
        <!-- rules：校验的规则 -->
        <!-- ref：查找dom节点，方便检验表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item label="上级分类" prop="pid">
            <!-- 一般来说，有select下拉框，都需要发请求获取下拉选项中的数据 -->
            <el-select v-model="ruleForm.pid">
              <!-- 根据数组循环出来 -->
              <el-option label="顶级分类" :value="0"></el-option>
              <!-- v-for循环数组，label是显示的文字内容，value是传给后台的值 -->
              <el-option v-for="(item, index) in optionList" :key="index"
                :label="item.catename" :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类名称" prop="catename">
            <el-input v-model="ruleForm.catename" placeholder="请输入标题">
            </el-input>
          </el-form-item>
          <el-form-item label="图片">
            <!-- action:上传的地址 -->
            <!-- auto-upload：是否自动上传 -->
            <!-- list-type：图片显示的方式 -->
            <!-- on-preview：预览图片的回调函数 -->
            <!-- on-remove：删除图片的回调函数 -->
            <!-- on-change：修改图片的回调函数 -->
            <!-- file-list:用来展示已经上传的图片,接受的数据是一个数组 -->
            <!-- limit:可以上传几张图片 -->
            <!-- on-exceed:文件超出个数限制时的钩子 -->
            <el-upload
              action=""
              :auto-upload="false"
              list-type="picture-card"
              :file-list="fileList"
              :limit="1"
              :on-exceed="handleExceed"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleChange">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <!-- label的值需要是数字，因此加上冒号，保证是变量 -->
            <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
            <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item>
            <!-- 有id说明是添加页面，没有id是修改页面，区分按钮 -->
            <el-button type="success" v-if="$route.params.id" @click="submitForm">立即修改</el-button>
            <el-button type="primary" v-else @click="submitForm">立即添加</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表单中的数据，要提交给后台
      ruleForm: {
        pid: '',
        catename: '',
        img: '',
        // 数字类型的数据
        status: 1
      },
      rules: {
        // 表单的验证规则
        catename: [{ required: true, message: "分类名称必填", trigger: "blur" }],
      },
      // 用于展示已经上传的图片
      fileList:[],
      // 下拉的数据
      optionList: []
    };
  },
  created(){
    // 发请求，获取下拉列表的数据
    this.getList();
    // 修改的流程：
    // 1.写好动态路由，并跳转进来
    // 2.进到页面，请求这个菜单的数据,修改是在原有的基础上修改
    // 3.渲染页面，讲数据填进去，供用户参考
    // 4.用户修改后
    // 5.提交数据
    // 发请求，获取当前id对应的菜单数据
    if(this.$route.params.id) {
      // 通过动态路由的参数判断！！！有id说明是修改，才会发请求
      this.getInfoByid();
    }
  },
  methods: {
    // 修改菜单，先拿数据
    getInfoByid() {
      this.$http('/cateinfo?id='+this.$route.params.id)
        .then(res => {
          // 根据这个id拿到数据后，显示在页面上
          this.ruleForm = res.data.list
          // 显示图片
          if(res.data.list.img) {
            // 一级分类没有img，所以不再向数组添加数据
            this.fileList.push({
              name: res.data.list.catename,
              url: this.$host + res.data.list.img
            })
          }
        })
    },
    getList() {
    // 发请求，获取下拉列表的数据，无论新增还是修改都需要
    this.$http.get('/catelist', {params: {istree: 1}})
      .then(res => {
        this.optionList = res.data.list
      })
    },
    // 移除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 修改图片
    handleChange(file, fileList){
      this.ruleForm.img = file.raw
    },
    // 文件超出个数限制
    handleExceed() {
      this.$message.error('超了！！');
    },
    // 图片上传的方式
    // 1. 分两次提交：先上传图片，服务器返回地址，地址就是图片的路径。其余的正常上传
    // 2. 一次性提交：先新建一个formData对象，是一个数据类型。将已有的数据添加进去，提交这个formData
    submitForm() {
      // 先校验
      this.$refs.ruleForm.validate((valid) => {
        // valid：校验结果
        if (valid) {
          // 检验成功
          this.add();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增或者修改菜单
    add() {
      // 创建formData类似的数据,用于提交
      let formData = new FormData();
      // 循环ruleForm，将数据从ruleForm里面复制到formData里面
      // formData.append('name','jack')
      for (const key in this.ruleForm) {
        formData.append(key, this.ruleForm[key]);
      }
      // 查看formData的内容
      // formData.forEach((key,val)=> {
      //   console.log(key,val);
      // })
      // 判断新增还是修改
      if(this.$route.params.id) {
        // 修改时需要额外传id
        formData.append(id, this.$route.params.id);
        this.$http.post('/menuedit', formData)
        .then(res => {
          if(res.data.code === 200) {
            // 添加成功后，返回上一页看效果
            this.$router.back()
          }
        })
        .catch(err => {
          console.log(err);
        })
      }else {
        // 新增
        // post请求，第一个参数是接口地址；第二个是数据
      this.$http.post('/cateadd', formData)
        .then(res => {
          if(res.data.code === 200) {
            // 添加成功后，返回上一页看效果
            this.$router.back()
          }
        })
        .catch(err => {
          console.log(err);
        })
      }
    }
  }
};
</script>
<style lang="">
.box {
  background-color: #fff;
}
</style>